<template>
  <view class="navi-wrap" :style="{ height: naviWrapheight }">
    <view
      class="navi-placeholder"
      :style="{ height: naviWrapheight, background: background, 'box-shadow': boxShadow }"
    ></view>
    <view
      class="navi"
      :class="{ light: theme === 'light', dark: theme === 'dark' }"
      :style="{ height: naviWrapheight, background: background, 'box-shadow': boxShadow,'z-index':zindex }"
    >
      <status-bar :background="background"></status-bar>
      <view class="navi-row" :style="{ height: `${DEFAULT_NAVI_HEIGHT}px` }">
        <view
          class="navi-icons"
          :class="{ 'pi-solid-1': showBorder && hasMultiIcons }"
        >
          <view
            v-if="showBack && isShowNaviBack"
            @tap="naviBackHandle"
            class="navi-icon navi-back"
          >
            <view class="icon-back"></view>
          </view>
          <view
            v-if="showHome && isShowNaviHome"
            @tap="naviHomeHandle"
            class="navi-icon navi-home"
          >
            <view class="icon-homefill"></view>
          </view>
        </view>
        <view class="slot-left">
          <slot name="left"></slot>
        </view>
        <view class="slot">
          <slot></slot>
        </view>
        <view class="slot-right">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getSystemInfo } from '../utils/system.js'
import StatusBar from './status-bar'

const DEFAULT_NAVI_HEIGHT = 44
const TIMEOUT = 20

/* 自定义导航栏涉及到系统的渲染方式，这里使用px比较合适 */
export default {
  name: 'PiCustomNavi',
  components: { StatusBar },
  props: {
    // 是否显示后退按钮
    showBack: {
      required: false,
      type: Boolean,
      default: true
    },
    // 是否显示主页按钮
    showHome: {
      required: false,
      type: [String, Boolean],
      default: true
    },
    showBorder: {
      required: false,
      type: Boolean,
      default: false
    },
    // 背景颜色
    background: {
      required: false,
      type: String,
      default: "#0CD4D3"
    },
	zindex: {
	  required: false,
	  type: String,
	  default: "20"
	},
    // 导航阴影
    boxShadow: {
      required: false,
      type: String,
      default: 'none'
    },
    // 主题，light or dark
    theme: {
      required: false,
      type: String,
      default: 'light'
    }
  },
  data () {
    const systemInfo = getSystemInfo()
    return {
      DEFAULT_NAVI_HEIGHT,
      statusBarHeight: systemInfo && systemInfo.statusBarHeight ? systemInfo.statusBarHeight : 0,
      isShowNaviBack: false,
      isShowNaviHome: false
    }
  },
  computed: {
    hasMultiIcons () {
      return this.showBack && this.isShowNaviBack && (this.showHome && this.isShowNaviHome)
    },
    naviWrapheight () {
      return `${this.DEFAULT_NAVI_HEIGHT + this.statusBarHeight}px`
    }
  },
  onReady () {
    this.syncPageRoute()
  },
  mounted () {
    this.syncPageRoute()
  },
  methods: {
    syncPageRoute () {
      /* eslint-disable */
      const pages = getCurrentPages()
      // console.log('当前打开页面堆栈为：', pages)
      // 如果堆栈大于1表示打开了子页面，需要显示返回按钮
      this.isShowNaviBack = pages.length > 1
      // 如果当前不是主页那么显示主页按钮
      this.isShowNaviHome = pages[pages.length - 1].route !== this.$consts.INDEX_PATH
    },
    naviBackHandle () {
      setTimeout(() => {
        uni.navigateBack({ delta: 1 })
      }, TIMEOUT)
    },
    naviHomeHandle () {
      setTimeout(() => {
        if (this.$consts && this.$consts.INDEX_PATH) {
          const indexPath = this.$consts.INDEX_PATH.startsWith('/') ? this.$consts.INDEX_PATH : `/${this.$consts.INDEX_PATH}`
          uni.switchTab({
            url: indexPath
          })
        } else {
          this.$emit('home')
        }
      }, TIMEOUT)
    },
    naviDebuggerHandle () {
      this.showNaviDebugger = true
    },
    closeDebuggerHandle () {
      this.showNaviDebugger = false
    }
  }
}
</script>

<style lang="scss" scoped>
.navi-wrap {
  background: $pi-navi-background;
  .navi-placeholder {
    background: $pi-navi-background;
  }
  .navi {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: $pi-navi-z-index;
    width: 100%;
    background: $pi-navi-background;
    .status-bar {
      color: #000000;
    }
    .navi-row {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
      padding: 0 12px 0 12px;
      .navi-icons {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        height: $pi-navi-icon-border-height;
        line-height: $pi-navi-icon-border-height;
        border-radius: 5000000px;
        &::after {
          border-color: #ececec;
        }
        .navi-icon {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
          padding-right: 24px;
          z-index: $pi-navi-z-index;
          & > view {
            font-size: $pi-navi-icon-size;
            font-weight: $pi-navi-icon-weight;
            color: $pi-navi-icon-color;
            /*  #ifdef MP-WEIXIN  */
            font-size: $pi-navi-icon-size-MP-WEIXIN;
            font-weight: $pi-navi-icon-weight-MP-WEIXIN;
            color: $pi-navi-icon-color-MP-WEIXIN;
            /*  #endif  */
          }
        }
        .icon-back {
          width: $pi-navi-icon-size;
          height: $pi-navi-icon-size;
          background: url("../assets/img/back.png") no-repeat center center /
            contain;
        }
        .icon-homefill {
          width: $pi-navi-icon-size;
          height: $pi-navi-icon-size;
          background: url("../assets/img/home_fill.png") no-repeat center center /
            contain;
        }
        &.pi-solid-1 .navi-icon:not(:last-child) {
          @include pi-border;
          &::after {
            height: 120%;
            top: 50%;
            transform: scale(0.5) translateY(-50%);
            border-right: 1px solid #ececec;
          }
        }
      }
      .slot {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        font-size: $pi-navi-title-size;
        font-weight: 500;
        color: $pi-navi-icon-color;
      }
      .slot-left {
        z-index: $pi-navi-z-index;
      }
      .slot-right {
        z-index: $pi-navi-z-index;
        position: absolute;
        right: 24rpx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    // 如果是暗色主题，那么把文字和图标颜色设置成白色
    &.dark {
      .slot,
      .navi-icon > view {
        color: #ffffff;
      }
      .navi-row .navi-icons {
        .icon-back {
          background: url("../assets/img/back-white.png") no-repeat center
            center / contain;
        }
        .icon-homefill {
          background: url("../assets/img/home_fill-white.png") no-repeat center
            center / contain;
        }
      }
    }
  }
}
</style>
